import Layout from '@/layout'
import { getRouters } from '@/api/menu'

// 前端路由表
const constantRouterComponents = {
    // 基础页面 layout 必须引入
    PageView: Layout, // 基础布局，包含了面包屑，和中间内容区 (slot)
}

// 前端未找到页面路由（固定不用改）
const notFoundRouter = {
    path: '*', redirect: '/404', hidden: true
}

/**
 * 获取路由菜单信息
 *
 * 1. 调用 getRouters() 访问后端接口获得路由结构数组
 *    @see https://github.com/sendya/ant-design-pro-vue/blob/feature/dynamic-menu/public/dynamic-menu.json
 * 2. 调用
 * @returns {Promise<any>}
 */
export const generatorDynamicRouter = () => {
    return new Promise((resolve, reject) => {
        // ajax
        getRouters().then(res => {
            const rootMenu = getRootMenu(res.data)
            const routers = generator(rootMenu)
            routers.push(notFoundRouter)
            resolve(routers)
        }).catch(err => {
            reject(err)
        })
    })
}

/**
 * 格式化 后端 结构信息并递归生成层级路由表
 *
 * @param routerMap
 * @param parent
 * @returns {*}
 */
var data = {
    parentId:"",//菜单栏父id
    menuId:"",//菜单栏id
    menuName: '',//菜单栏名称,
    path: '',//菜单栏路径
    component: '',//组件
    redirect:'',//是否打开外连接
    visible: '',//菜单栏是否隐藏 0或者1
    orderNum:"",//显示排序
    menuType:"",//菜单栏类型 M:目录 C:菜单
    target:"",//当前窗口:""新窗口:_blank  menuType:C显示
    icon: '',//icon menuType:C显示
}
export const generator = (routerMap, parent) => {
    return routerMap.map(item => {
        const currentRouter = {
            // 路由地址 动态拼接生成如 /dashboard/workplace
            path: item.path || `${parent && parent.path || ''}/${item.key}`,
            // 路由名称，建议唯一
            name: item.name || item.key || '',
            // 该路由对应页面的 组件 优先根据组件名或者key从constantRouterComponents获取，没有则通过组件名地址查询
            component: constantRouterComponents[item.component || item.key] || loadView(item.component),
            hideChildrenInMenu: item.hideChildrenInMenu || false,
            // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
            meta: { title: item.title, icon: item.icon || undefined, hiddenHeaderContent: item.hiddenHeaderContent || false, target: item.target },
        }
        // 隐藏菜单
        if (item.hidden) {
            currentRouter.hidden = true
        }
        // 是否设置了隐藏子菜单
        if (item.hideChildrenInMenu) {
            currentRouter.hideChildrenInMenu = true
        }
        // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
        if (!currentRouter.path.startsWith('http')) {
            currentRouter.path = currentRouter.path.replace('//', '/')
        }
        // 重定向
        item.redirect && (currentRouter.redirect = item.redirect)
        // 是否有子菜单，并递归处理
        if (item.children && item.children.length > 0) {
            // Recursion
            currentRouter.children = generator(item.children, currentRouter)
        }
        return currentRouter
    })
}
export const loadView = (view) => { // 路由懒加载
    return resolve => require([`@/views/${view}`], resolve)
}

export function getRootMenu(rows) {
    // 根菜单
    const arr = []
    buildtree(rows, arr, 0)
    return arr
}

export function buildtree(list, arr, parentId) {
    list.forEach(item => {
        if (item.parentId === parentId) {
            var child = {
                title: item.menuName,
                key: item.menuKey,
                icon: item.icon,
                hidden: item.visible === '1',
                path: item.path && item.path.length > 0 ? item.path : undefined,
                component: item.component,
                redirect: item.redirect,
                target: item.target,
                hideChildrenInMenu: item.hiddenChildren,
                hiddenHeaderContent: item.hiddenHeader,
                children: []
            }
            buildtree(list, child.children, item.menuId)
            if (child.children.length === 0) {
                delete child.children
            }
            arr.push(child)
        }
    })
}